<template>
  <div id="app">
    <transition>
      <components :is="coms[ssIndex]"></components>
    </transition>
    <footer>
      <div class="Qlist">
        <div
          @click="ssIndex = index"
          :class="{
            iconfont: true,
            [item.icon]: true,
            active: ssIndex == index,
          }"
          v-for="(item, index) in footlist"
          :key="index"
        >
          <span class="iconfont"></span>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import SApp from "./components/SApp.vue";
import BApp from "./components/BApp.vue";
import GApp from "./components/GApp.vue";
import PApp from "./components/PApp.vue";
export default {
  name: "App",
  data() {
    return {
      coms: [SApp, BApp, GApp, PApp],
      ssIndex: 0,
      footlist: [
        { icon: "icon-home", name: "首页" },
        { icon: "icon-xitongrizhi", name: "爆爆团" },
        { icon: "icon-zhuantiguanli", name: "订单" },
        { icon: "icon-yonghu", name: "我的" },
      ],
    };
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
footer {
  position: fixed;
  height: 11vh;
  width: 100vw;
  bottom: 0;
  background-color: rgb(255, 255, 255);
  border-top: gainsboro 1px solid;
}
.Qlist .iconfont {
  font-size: 30px;
}
p {
  font-size: 18px;
}
.Qlist {
  height: 11vh;
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-items: center;
}
.Qlist .active {
  color: rgb(0, 183, 255);
}
.v-enter{
  opacity: 0;
}
.v-enter-active{
transition: all 0.2s;
}
.v-enter-to{
  opacity: 1;
}
.v-leave{
  opacity: 1;
}
.v-leave-active{
transition: all 0.3s;
}
.v-leave-to{
  opacity: 0;
  transform: rotate(0deg);
}

</style>
